<!DOCTYPE HTML>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="theme/kying/common :: head(~{::title})">
    <title th:text="|归档 - ${webname} - 愿你相对辛苦但绝对优秀|">归档 - 三岁的博客 - 愿你相对辛苦但绝对优秀!</title>
    <!-- 使用url函数转换相关路径 -->
</head>
<body>

<span th:replace="theme/kying/common :: nav"></span>

<div id="pjax-container">
    <style>
        #header {
            height: 70vh;
        }

        @media (max-width: 768px) {
            #header {
                height: 40vh;
            }
        }

        #site-meta {
            display: none;
        }
    </style>
    <header id="header" class="clearfix animated fadeInDown">
        <div id="site-meta">
            <h1 id="site-name" th:text="${webname}">San'Sui Blog</h1>
            <h2 id="site-description" th:text="${webTitle}">San'Sui Blog</h2>
        </div>
        <div id="background"></div>
    </header><!-- end #header -->
    <div id="body" class="animated fadeIn">
        <div class="container">
            <div class="row">
                <div id="main" class="col-mb-12 col-8 col-offset-2">
                    <style>
                        html {
                            overflow-x: hidden;
                            overflow-y: auto
                        }

                        #archives-tags, #archives-categories {
                            margin: 30px 0;
                            position: relative
                        }

                        #archives-tags > div, #archives-categories > div {
                            font-size: 2.5rem;
                            position: relative;
                            color: rgba(0, 0, 0, 0.6);
                            padding: 0 0 0 20px;
                            margin: 0 0 20px 0;
                            text-shadow: 0 0 5px #b2b2b2
                        }

                        #archives-tags-list, #archives-cate-list {
                            margin: 0;
                            padding: 0 0 0 40px
                        }

                        .archives-tags-item:before, .archives-cate-item:before {
                            border-top: 12.5px solid transparent;
                            border-right: 10px solid rgba(0, 0, 0, 0.6);
                            border-bottom: 12.5px solid transparent;
                            content: "";
                            height: 0;
                            position: absolute;
                            top: 0;
                            left: -10px;
                            width: 0
                        }

                        .archives-tags-item:after, .archives-cate-item:after {
                            background-color: #f2f2f2;
                            border-radius: 50%;
                            content: "";
                            height: 4px;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            left: -4px;
                            width: 4px
                        }

                        .archives-tags-item, .archives-cate-item {
                            font-size: 15px;
                            line-height: 15px;
                            list-style: none;
                            padding: 5px 8px;
                            margin: 4px 6px;
                            height: 15px;
                            display: inline-block;
                            position: relative;
                            word-break: break-all;
                            background-color: rgba(0, 0, 0, 0.6);
                            border-radius: 0 5px 5px 0
                        }

                        .archives-tags-item > a, .archives-cate-item > a {
                            color: #fff
                        }

                        #timeline-container {
                            position: relative
                        }

                        #timeline-container:before {
                            z-index: -1;
                            content: '';
                            position: absolute;
                            width: 4px;
                            left: 73px;
                            top: 10px;
                            height: 100%;
                            background-color: #dcdcdc
                        }

                        .timeline-ym {
                            position: relative;
                            display: inline-block;
                            margin: 10px 0;
                            padding: 0 12px;
                            font-size: 1rem;
                            left: 10px;
                            background-color: #6f6f6f;
                            height: 32px;
                            line-height: 32px;
                            border-radius: 20px
                        }

                        .timeline-ym a {
                            color: #fff
                        }

                        .timeline-box {
                            padding-left: 90px;
                            position: relative
                        }

                        .timeline-box:before {
                            content: '';
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            color: #fff;
                            text-align: center;
                            background-color: #8a8a8a;
                            border-radius: 50%;
                            position: absolute;
                            left: 65px;
                            top: 5.5px
                        }

                        .timeline-post:before {
                            content: "";
                            width: 12px;
                            height: 12px;
                            position: absolute;
                            border-radius: 50%;
                            background-color: #f2f2f2;
                            top: 9.5px;
                            left: -36px;
                            transition: all .5s ease;
                            -webkit-transition: all .5s ease
                        }

                        .timeline-post {
                            padding: 0;
                            font-size: .95rem;
                            display: block;
                            min-height: 2rem;
                            line-height: 2rem;
                            border-radius: 4px;
                            position: relative;
                            margin: 5px 0 5px 15px
                        }

                        .timeline-post a {
                            position: relative
                        }

                        .timeline-post a::after {
                            content: '';
                            display: block;
                            width: 0;
                            height: 2px;
                            position: absolute;
                            left: 0;
                            bottom: -5px;
                            background: #6f6f6f;
                            transition: all .5s ease-in-out
                        }

                        .timeline-post a:hover::after {
                            width: 100%
                        }

                        .timeline-post:hover::before {
                            background-color: #474747
                        }

                        .timeline-post-time {
                            position: absolute;
                            color: #6f6f6f;
                            font-family: Consolas;
                            font-size: .9rem;
                            left: -100px;
                            top: 0
                        }
                    </style>
                    <!--标签-->
<!--                    <div id="archives-tags" class="animated bounceInLeft">-->
<!--                        <div>Tags</div>-->
<!--                        <ul id="archives-tags-list">-->
<!--                            <li class="archives-tags-item">-->
<!--                                <a href="" target="_blank">Linux</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
                    <!--分类-->
<!--                    <div id="archives-categories" class="animated bounceInRight">-->
<!--                        <div>Categories</div>-->
<!--                        <ul id="archives-cate-list">-->
<!--                            <li class="archives-cate-item"><a-->
<!--                                    href=""-->
<!--                                    target="_blank">学习笔记</a></li>-->
<!--                            <li class="archives-cate-item"><a-->
<!--                                    href="#"-->
<!--                                    target="_blank">系统类</a></li>-->
<!--                        </ul>-->
<!--                    </div>-->
                    <div id="archives-tags" class="animated bounceInRight">
                        <div>归档信息</div>
                    </div>
                    <div id="timeline-container" class="animated bounceInLeft">
                        <span th:each="archive:${archiveInfo}">
                            <div class="timeline-ym timeline-item">
                                <a th:text="|${archive.key}年|"></a>
                            </div>
                            <div class="timeline-box">
                                <div class="timeline-post timeline-item" th:each="blog:${archive.value}">
                                    <a href="#" target="_blank" th:text="${blog.title}" th:href="@{/blogs/{id}(id=${blog.blogId})}"></a>
                                    <span class="timeline-post-time">
                                        <span th:text="|${#dates.format(blog.updateTime,'MMMdd')}日|"></span>
                                    </span>
                                </div>
                            </div>
                        </span>
                    </div><!-- end timeline container -->
                </div><!-- end #main-->

            </div><!-- end .row -->
        </div><!-- end .container -->
    </div><!-- end #body -->
</div><!-- end #pjax-container -->

<div th:replace="theme/kying/common :: go-top"></div>
<footer th:replace="theme/kying/common :: footer"></footer>

<!--/*/<th:block th:replace="theme/kying/common :: script">/*/-->

<!--/*/</th:block>/*/-->

</body>
</html>